<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>球馆详情页原型</title>
    <style>
      /* 全局样式重置 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background-color: #faf9f5;
        color: #333333;
        line-height: 1.5;
      }

      /* 页面容器 */
      .container {
        max-width: 480px;
        margin: 0 auto;
        background-color: #ffffff;
        min-height: 100vh;
        position: relative;
        padding-bottom: 80px; /* 为底部操作栏留出空间 */
      }

      /* ==================== 顶部导航栏 ==================== */
      .topNavBar {
        position: sticky;
        top: 0;
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid #e8e8e8;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 100;
      }

      .navLeft {
        width: 40px;
      }

      .backButton {
        font-size: 24px;
        color: #333333;
        border: none;
        background: none;
        cursor: pointer;
        padding: 0;
      }

      .navCenter {
        flex: 1;
        text-align: center;
      }

      .pageTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
      }

      .iconButton {
        font-size: 20px;
        color: #333333;
        border: none;
        background: none;
        cursor: pointer;
        padding: 0;
      }

      /* ==================== 轮播图区域 ==================== */
      .bannerSection {
        position: relative;
        width: 100%;
        height: 230px;
        background-color: #e8e8e8;
        overflow: hidden;
      }

      .bannerImage {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
      }

      /* 图片占位符十字线 */
      .bannerImage::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        height: 1px;
        background: linear-gradient(to right, transparent, #ccc, transparent);
        z-index: 1;
      }

      .bannerImage::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1px;
        height: 70%;
        background: linear-gradient(to bottom, transparent, #ccc, transparent);
        z-index: 1;
      }

      .placeholderText {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #999999;
        font-size: 14px;
        z-index: 2;
      }

      /* 图片切换标签 */
      .imageTabs {
        position: absolute;
        bottom: 16px;
        left: 16px;
        display: flex;
        gap: 8px;
        z-index: 3;
      }

      .imageTab {
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .imageTab.active {
        background-color: #333333;
        color: #ffffff;
      }

      .imageTab.inactive {
        background-color: rgba(255, 255, 255, 0.9);
        color: #333333;
      }

      /* ==================== 球馆信息区域 ==================== */
      .venueInfo {
        padding: 16px;
        background-color: #ffffff;
        border-radius: 8px;
      }

      .venueHeader {
        margin-bottom: 12px;
      }

      .venueName {
        font-size: 18px;
        color: #333333;
        margin: 0;
      }

      .venueAddress {
        margin-bottom: 12px;
      }

      .addressText {
        font-size: 13px;
        color: #666666;
        line-height: 1.5;
        font-weight: 400;
      }

      .venueMeta {
        display: flex;
        gap: 12px;
        margin-bottom: 12px;
        font-size: 12px;
        color: #000;
      }

      .metaItem {
        flex-shrink: 0;
      }

      .venueActions {
        display: flex;
        gap: 12px;
      }

      .actionBtn {
        flex: 1;
        padding: 8px;
        background-color: #f5f5f5;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: all 0.3s ease;
        height: 36px;
        justify-content: center;
      }

      .actionBtn:hover {
        background-color: #f0f0f0;
      }

      .actionIcon {
        font-size: 16px;
      }

      .iconPlaceholder {
        width: 20px;
        height: 20px;
        border: 2px solid #d0d0d0;
        border-radius: 3px;
        background-color: #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        color: #999;
        flex-shrink: 0;
      }

      .actionText {
        font-size: 11px;
        color: #333333;
      }

      /* ==================== 场地设施区域 ==================== */
      .facilitySection {
        padding: 20px 16px;
        border-bottom: 1px solid #f0f0f0;
      }

      .sectionTitle {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        margin-bottom: 16px;
      }

      /* 场地规格选择 */
      .fieldOptions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 24px;
      }

      .fieldOption {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        position: relative;
        background-color: #ffffff;
        transition: all 0.3s ease;
      }

      /* 可用场地 */
      .fieldOption.available {
        border-color: #d0d0d0;
        cursor: default;
      }

      /* 不可用场地（禁用状态） */
      .fieldOption.unavailable {
        opacity: 0.4;
        border-color: #e0e0e0;
        cursor: not-allowed;
      }

      .fieldIcon {
        width: 28px;
        height: 28px;
        border: 2px solid #d0d0d0;
        border-radius: 3px;
        background-color: #fafafa;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        color: #666666;
        flex-shrink: 0;
      }

      .fieldInfo {
        flex: 1;
      }

      .fieldName {
        font-size: 13px;
        color: #333333;
        font-weight: 500;
      }

      .fieldBadge {
        position: absolute;
        top: 6px;
        right: 8px;
        padding: 3px 10px;
        border-radius: 10px;
        font-size: 9px;
        font-weight: 600;
        background-color: #ffa500;
        color: #ffffff;
      }

      .checkIcon {
        display: none;
      }

      .checkIcon.show {
        display: block;
        position: absolute;
        top: 6px;
        right: 8px;
        font-size: 18px;
        color: #333333;
        font-weight: bold;
      }

      /* 设施图标网格 */
      .facilitiesGrid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        padding-top: 16px;
        border-top: 1px solid #f0f0f0;
      }

      .facilityItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 0;
      }

      .facilityIcon {
        width: 44px;
        height: 44px;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        background-color: #fafafa;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        color: #999999;
        font-weight: 500;
      }

      .facilityIcon.available {
        border-color: #d0d0d0;
        color: #666666;
      }

      .facilityIcon.unavailable {
        opacity: 0.4;
      }

      .facilityLabel {
        font-size: 10px;
        color: #666666;
        text-align: center;
        line-height: 1.3;
      }

      .facilityLabel.unavailable {
        color: #999999;
      }

      /* ==================== 底部操作栏 ==================== */
      .bottomActionBar {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 480px;
        background-color: #ffffff;
        border-top: 1px solid #e8e8e8;
        padding: 12px 16px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 100;
      }

      .primaryButton {
        flex: 1;
        height: 48px;
        background-color: #333333;
        color: #ffffff;
        border: none;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .primaryButton:hover {
        background-color: #4a4a4a;
      }

      .primaryButton:active {
        background-color: #2a2a2a;
      }

      /* ==================== 响应式调整 ==================== */
      @media (max-width: 375px) {
        .venueName {
          font-size: 18px;
        }

        .facilitiesGrid {
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;
        }

        .facilityIcon {
          width: 44px;
          height: 44px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 顶部导航栏 -->
      <div class="topNavBar">
        <div class="navLeft">
          <button class="backButton">‹</button>
        </div>
        <div class="navCenter">
          <div class="pageTitle">详细信息</div>
        </div>
      </div>

      <!-- 轮播图区域 -->
      <div class="bannerSection">
        <div class="bannerImage">
          <span class="placeholderText">球场实景图</span>
        </div>
        <div class="imageTabs">
          <div class="imageTab active">球赛视频</div>
          <div class="imageTab inactive">球场图</div>
        </div>
      </div>

      <!-- 球馆信息区域 -->
      <div class="venueInfo">
        <div class="venueHeader">
          <div class="venueName">众乐谷丰路足球训练基地</div>
        </div>
        <div class="venueAddress">
          <div class="addressText">湖南省长沙市岳麓区望岳街道金星北路辅路000号</div>
        </div>
        <div class="venueMeta">
          <div class="metaItem">距您127m</div>
        </div>
        <div class="venueActions">
          <button class="actionBtn">
            <span class="actionIcon iconPlaceholder"></span>
            <span class="actionText">导航</span>
          </button>
        </div>
      </div>

      <!-- 场地设施区域 -->
      <div class="facilitySection">
        <h2 class="sectionTitle">场地设施</h2>

        <!-- 场地规格展示 -->
        <div class="fieldOptions">
          <div class="fieldOption unavailable">
            <div class="fieldIcon">场</div>
            <div class="fieldInfo">
              <div class="fieldName">五人制</div>
            </div>
          </div>

          <div class="fieldOption available">
            <div class="fieldIcon">场</div>
            <div class="fieldInfo">
              <div class="fieldName">七人制</div>
            </div>
            <span class="fieldBadge"> 智能运镜</span>
          </div>

          <div class="fieldOption available">
            <div class="fieldIcon">场</div>
            <div class="fieldInfo">
              <div class="fieldName">八人制</div>
            </div>
            <span class="fieldBadge"> 智能运镜</span>
          </div>

          <div class="fieldOption unavailable">
            <div class="fieldIcon">场</div>
            <div class="fieldInfo">
              <div class="fieldName">十一人制</div>
            </div>
          </div>
        </div>

        <!-- 设施图标展示 -->
        <div class="facilitiesGrid">
          <div class="facilityItem">
            <div class="facilityIcon unavailable">P</div>
            <div class="facilityLabel unavailable">停车</div>
          </div>

          <div class="facilityItem">
            <div class="facilityIcon available">W</div>
            <div class="facilityLabel">WIFI</div>
          </div>

          <div class="facilityItem">
            <div class="facilityIcon available">灯</div>
            <div class="facilityLabel">灯光球场</div>
          </div>

          <div class="facilityItem">
            <div class="facilityIcon available">更</div>
            <div class="facilityLabel">更衣室</div>
          </div>

          <div class="facilityItem">
            <div class="facilityIcon available">淋</div>
            <div class="facilityLabel">淋浴间</div>
          </div>

          <div class="facilityItem">
            <div class="facilityIcon available">看</div>
            <div class="facilityLabel">看台</div>
          </div>

          <div class="facilityItem">
            <div class="facilityIcon available">超</div>
            <div class="facilityLabel">超市</div>
          </div>

          <div class="facilityItem">
            <div class="facilityIcon available">装</div>
            <div class="facilityLabel">装备</div>
          </div>
        </div>
      </div>

      <!-- 底部操作栏 -->
      <div class="bottomActionBar">
        <button class="primaryButton">开一局</button>
      </div>
    </div>

    <script>
      // 图片标签切换
      const imageTabs = document.querySelectorAll('.imageTab')

      imageTabs.forEach((tab) => {
        tab.addEventListener('click', function () {
          // 移除所有激活状态
          imageTabs.forEach((t) => {
            t.classList.remove('active')
            t.classList.add('inactive')
          })

          // 激活当前标签
          this.classList.remove('inactive')
          this.classList.add('active')

          // 更新占位文字
          const placeholderText = document.querySelector('.placeholderText')
          if (this.textContent.includes('球赛视频')) {
            placeholderText.textContent = '球赛视频'
          } else {
            placeholderText.textContent = '球场实景图'
          }
        })
      })

      // 场地规格展示（仅展示可用/不可用状态，不支持切换）
      // 可用场地显示正常，不可用场地显示透明禁用状态

      // 返回按钮
      const backButton = document.querySelector('.backButton')
      backButton.addEventListener('click', function () {
        alert('返回上一页')
        // 实际应用中执行返回操作
      })

      // 导航按钮
      const navigationButton = document.querySelector('.navigationButton')
      navigationButton.addEventListener('click', function () {
        alert('打开导航')
        // 实际应用中调用地图导航功能
      })

      // 开一局按钮
      const primaryButton = document.querySelector('.primaryButton')
      primaryButton.addEventListener('click', function () {
        alert('前往创建球局')
        // 实际应用中跳转到创建球局页面
      })
    </script>
  </body>
</html>
